<template>
  <div class="mask" v-show="showBuy">
    <iframe src="www.baidu.com" frameborder="0"></iframe>
    <!--<div class="tkcont">-->
      <!--<h1>发布该作品需支付<em>49</em>元，发布后可免费再编辑</h1>-->
      <!--<p>请选择支付方式</p>-->
      <!--<div class="payway clearfix">-->
        <!--<div class="leftpart fl">-->
          <!--<a href="#" class="on"><img src="../../assets/images/wxpay.jpg"></a>-->
          <!--<a href="#"><img src="../../assets/images/alipay.jpg"></a>-->
        <!--</div>-->
        <!--<div class="rightpart fl">-->
          <!--<img src="../../assets/images/qrcode.jpg">-->
          <!--<p>使用微信扫码付款</p>-->
        <!--</div>-->
      <!--</div>-->
      <!--<span>您也可以选择使用账户余额去支付<a href="#">余额支付</a></span>-->
      <!--<a href="#" class="btn">确定</a>-->
      <!--<a href="#" class="close"></a>-->
    <!--</div>-->
  </div>
</template>

<script>
  export default {
    name: "buytk",
    props: ['showBuy'],
    data: function () {
    }
  }
</script>

<style type="text/javascript" scoped>
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
}
.tkcont{position: fixed;width: 600px;height: 450px;top: 50%;left: 50%;margin: -225px 0 0 -300px;background: #fff;}
.tkcont h1{width: 100%;height: 70px;line-height: 70px;font-size: 16px;font-weight: normal;background: #fafafa;text-indent: 40px;}
.tkcont h1 em{padding: 0 5px;color: #1abd9b;font-weight: bold}
.tkcont>p{height: 50px;line-height: 50px;margin: 0 40px;border-bottom: 1px solid #f3f3f3;font-size: 14px;}
.payway{margin: 0 40px;}
.payway .leftpart a{width: 128px;height: 58px;border: 1px solid #f3f3f3;margin-top: 20px;}
.payway .leftpart a.on{border: 1px solid #1abd9b;background: url(../../assets/images/checkicon.png) no-repeat right bottom;}
.payway .leftpart a img{display:block;width: 110px;height: 40px;margin: 9px;}
.payway .rightpart{margin-left: 30px;}
.payway .rightpart img{display:block;width: 120px;height: 120px;padding: 8px;background: url(../../assets/images/codewrap.png) no-repeat center;background-size: contain;margin-top: 20px;}
.payway .rightpart p{height: 20px;line-height: 20px;text-align: center;font-size: 13px;color: #999;}
.tkcont>span{display: block;height: 50px;line-height: 30px;margin: 20px 40px;border-bottom: 1px solid #f3f3f3;font-size: 14px;}
.tkcont>span a{display: inline-block;padding: 8px;height: 50px;}
.tkcont .btn{display: block; width: 120px;height: 35px;line-height: 35px;margin: 30px auto; color: #fff;background: #1abd9b;text-align: center;font-size: 14px;border-radius: 3px;}
.close{position: absolute;display: block; width: 13px;height: 13px;top: 13px;right: 13px; background: url(../../assets/images/closebtn.png) no-repeat center;background-size: contain;}
</style>
